<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				border: none;
			}
			ul,li{
				list-style: none;
			}
			#box{
				width: 500px;
				height: 400px;
				position: relative;
				margin: 10px auto;
			}
			#list{
				width: 500px;
				height: 300px;
				
			}
			#list li{
				width: 500px;
				height: 300px;
				position: absolute;
				opacity: 0;
				filter: alpha(opacity=0);
			}
			#list img{
				width: 500px;
				height: 300px;
			}
			#list2{
				width: 500px;
				height: 100px;
				position: absolute;
				top: 300px;
				background: #ccc;
			}
			#list2 li{
				width: 100px;
				height: 100px;
				float: left;
				opacity: 0.3;
				filter: alpha(opacity=30);
			}
			#list2 img{
				width: 100px;
				height: 100px;
			}
			
		</style>
		<script type="text/javascript" src="move.js" ></script>
		<script type="text/javascript">
			onload = function(){
				var oList = document.getElementById("list");
				var aLi   = oList.getElementsByTagName("li");
				
				var oList2 = document.getElementById("list2");
				var aLi2   = oList2.getElementsByTagName("li");
				
				//记录图片的下标
				var i = 0;
				
//				//  方式1 显示第一张图片
//				for(var j=0;j<aLi.length;j++){
//					//显示
//					if(j==i){
//						//大图片显示出来
//						aLi[j].style.opacity = 1;
//						aLi[j].style.filter = "alpha(opacity=100)";
//						
//						//小图片，也完全显示
//						aLi2[j].style.opacity = 1;
//						aLi2[j].style.filter = "alpha(opacity=100)";
//					}
//				}
				
				//方式2
				//大图片显示出来
						aLi[0].style.opacity = 1;
						aLi[0].style.filter = "alpha(opacity=100)";
				//小图片，也完全显示
						aLi2[0].style.opacity = 1;
						aLi2[0].style.filter = "alpha(opacity=100)";
				
				//开启一个定时器，每隔3秒执行一次
				var timer = setInterval(move,3000);
				//切换一张图片
				function move(){
					i++;
					if(i>=aLi.length){//如果超过了ali下标的最大值，则让i=0；
						i=0;
					}
					
					for(var j=0;j<aLi.length;j++){
						if(i==j){//需要显示的图片
							
							//大图片
							startMove(aLi[j],"opacity",100);
							
							//小图片
							startMove(aLi2[j],"opacity",100);
						}else{
							
							//大图片
							startMove(aLi[j],"opacity",0);
							//小图片
							startMove(aLi2[j],"opacity",30);
						}
						
					}
				}
			
			//====点击切换图片
			for(var j=0;j<aLi2.length;j++){
				aLi2[j].index = j;
				aLi2[j].onclick = function(){
					i = this.index -1;//因为move里会加1
					
					//立刻切换图片
					move();
					clearInterval(timer);
					timer = setInterval(move,3000);
				};
			}
			
			}
		</script>
	</head>
	<body>
		<div id="box">
			<ul id="list">
				<li><img src="images/1.jpg"/></li>
				<li><img src="images/2.jpg"/></li>
				<li><img src="images/3.jpg"/></li>
			</ul>
			<ul id="list2">
				<li><img src="images/1.jpg"/></li>
				<li><img src="images/2.jpg"/></li>
				<li><img src="images/3.jpg"/></li>
			</ul>
		</div>
	</body>
</html>
